<template>
	<view class="record-function">
		<scroll-view scroll-x="true" class="function-list flex--row" @scrolltoupper="index=0" @scrolltolower="index=1">
			<view id="tool" class="function-item flex--row" @click.stop="$emit('stopTravel')" role="button">
				<text class="function-item-desc text--secondary-dark">
					结束出行
				</text>
				<view class="function-item-icon flex--row">
					<image aria-label="结束出行" src="@/static/ongoing/cancel.svg" class="icon"></image>
				</view>
			</view>
			
			<view id="contact" class="function-item flex--row">
				<text class="function-item-desc text--secondary-dark">
					{{partnerInfo.name}}
				</text>
				<view class="function-item-icon">
					<image aria-label="联系对方" src="@/static/ongoing/call.svg" class="icon" @click.stop="handlePhoneCall" role="button"></image>
				</view>
			</view>
		</scroll-view>
		<view class="function-index flex--row">
			<view class="function-index-item" :class="{'active':index === 0}"></view>
			<view class="function-index-item" :class="{'active':index === 1}"></view>
		</view>
	</view>
</template>

<script>
	export default {
		emits:['stopTravel'],
		props:['partnerInfo'],
		data(){
			return {
				index:0
			}
		},
		methods:{
			handlePhoneCall(){
				uni.makePhoneCall({
					phoneNumber:this.partnerInfo.phone,
					success:function(res){
						console.log(res)
					},
					fail:function(error){
						console.log(error)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	view{
		box-sizing: border-box;
	}
	
	.text--secondary-dark{
		font-size: 16px;
		font-weight: 600;
		color:#333;
	}
	
	.function-list{
		gap:12px;
		overflow:scroll;
		flex-wrap: nowrap;
		margin-bottom:12px;
		scroll-snap-type: x mandatory;
	}
	.function-item{
		@include border-four-roundings;
		
		flex-shrink: 0;
		justify-content: space-between;
		align-items: center;
		scroll-snap-stop: always;
		scroll-snap-align: start;
		
		width:100%;
		padding:4px 12px;
		
	}
	.function-item-icon{
		gap:6px;
	}
	
	.function-index{
		align-items: center;
		justify-content: center;
		gap:12px;
	}
	
	.function-index-item{
		width:16px;
		height:16px;
		border-radius: 50%;
		border:1px solid #333;
		background-color: #fff;
		
		&.active{
			background-color: #333;
		}
	}
</style>